
<template>
  <div class="user_box">
    <!-- 顶部登录状态框 -->
    <div class="login_top">
      <van-image round width="80px" height="80px" :src="avatar" />
      <div v-if="login_sta" class="nickname">点击登录</div>
      <div v-else class="nickname">{{ username }}</div>
      <van-icon :name="login_sta ? 'arrow' : 'cross'" @click="loginFn" />
    </div>
    <!-- 功能布局 -->
    <!-- <div class="my_tools">
      <van-grid :column-num="3" square>
        <van-grid-item
          v-for="item in toolsArr"
          :key="item.id"
          icon="photo-o"
          text="文字"
        />
      </van-grid>
    </div> -->
    <!-- 登录表单 -->
    <van-form v-if="active" @submit="onSubmit">
      <van-field
        v-model="username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="pwd"
        type="password"
        name="密码"
        label="密码"
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import { getUserData } from "@/utils/http.js";
export default {
  data() {
    return {
      avatar: "", //头像地址
      username: "", //用户名
      pwd: "", //密码
      active: false, //登录框显示/隐藏
      login_sta: true, //登录状态
      userInfo: [],

      //工具组件
      toolsArr: [
        { icon: "photo-o", text: "文字" },
        { icon: "photo-o", text: "文字" },
        { icon: "photo-o", text: "文字" },
        { icon: "photo-o", text: "文字" },
        { icon: "photo-o", text: "文字" },
        { icon: "photo-o", text: "文字" },
        { icon: "photo-o", text: "文字" },
        { icon: "photo-o", text: "文字" },
        { icon: "photo-o", text: "文字" },
        { icon: "photo-o", text: "文字" },
        { icon: "photo-o", text: "文字" },
      ],
    };
  },
  created() {
    let token = localStorage.getItem("token");
    let userInfo = JSON.parse(localStorage.getItem("suerInfo"));

    if (token) {
      this.avatar = userInfo.avatar;
      this.login_sta = true;
    }
  },
  // components: {
  //   [Dialog.Component.name]: Dialog.Component,
  // },
  methods: {
    onSubmit(values) {
      getUserData({ username: values["用户名"], pwd: values["密码"] }).then(
        (res) => {
          console.log(res);
          if (res.data.errno === 0) {
            //提示登陆成功组件
            this.$toast.success("登陆成功");

            //localStorage储存token和userInfo数据
            localStorage.setItem("token", res.data.data.token);
            localStorage.setItem(
              "userInfo",
              JSON.stringify(res.data.data.userInfo)
            );
            this.userInfo = JSON.parse(localStorage.getItem("userInfo"));
            this.username = this.userInfo.username;
            //登录头像
            this.avatar = this.userInfo.avatar;

            //隐藏登录框
            this.active = false;
            //切换登录状态
            this.login_sta = false;
            //清空输入框

            //请求失败
          } else if (res.data.errno === 602) {
            //密码错误提示
            this.$toast.fail("密码错误");
          }
          //导出用户信息
        }
      );
      // console.log(values["用户名"], values["密码"]);
    },
    loginFn() {
      if (this.login_sta) {
        this.active = true;
      } else {
        this.$dialog
          .confirm({
            title: "账号退出",
            message: "确认是否退出",
          })
          .then(() => {
            localStorage.removeItem("token");
            localStorage.removeItem("userInfo");
            this.login_sta = true;

            // 刷新页面 刷新当前路由
            this.$router.go(0);
          })
          .catch(() => {
            // on cancel
          });
      }
    },
  },
};
</script>

<style lang='less'>
.user_box {
  .login_top {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    height: 110px;
    background-color: rgb(73, 70, 70);
    color: white;
  }
}
</style>